<template>
  <div class="report-templates">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>报表模板</span>
          <el-button type="primary" size="small" @click="showAddDialog">添加模板</el-button>
        </div>
      </template>
      
      <el-table :data="templates" style="width: 100%" v-loading="loading">
        <el-table-column prop="name" label="模板名称" />
        <el-table-column prop="template_type" label="模板类型" />
        <el-table-column prop="is_active" label="状态">
          <template #default="{ row }">
            <el-tag :type="row.is_active ? 'success' : 'danger'" size="small">
              {{ row.is_active ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template #default="{ row }">
            <ActionMenu
              :actions="[
                { label: '编辑', onClick: () => editTemplate(row) },
                { label: '删除', onClick: () => deleteTemplate(row) }
              ]"
              :primary-count="2"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加/编辑模板对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '添加模板' : '编辑模板'" width="600px">
      <el-form :model="form" label-width="120px">
        <el-form-item label="模板名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="模板类型">
          <el-select v-model="form.template_type" style="width: 100%">
            <el-option label="CSV" value="csv" />
            <el-option label="Excel" value="excel" />
            <el-option label="HTML" value="html" />
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description" type="textarea" :rows="3" />
        </el-form-item>
        <el-form-item label="启用">
          <el-switch v-model="form.is_active" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import ActionMenu from '@/components/ActionMenu.vue'
import type { ReportTemplate, PaginationResponse, ApiResponse } from '@/types'
import { reportApi } from '@/api/report'
import { ElMessage } from 'element-plus'

const templates = ref<ReportTemplate[]>([])
const loading = ref(false)

const dialogVisible = ref(false)
const dialogType = ref<'add' | 'edit'>('add')
const form = ref<Partial<ReportTemplate>>({ name: '', template_type: 'csv', description: '', is_active: true })

const loadTemplates = async () => {
  loading.value = true
  try {
    const res = await reportApi.getTemplates()
    templates.value = (res.data.items ?? []) as ReportTemplate[]
  } catch (e) {
    ElMessage.error('加载模板失败')
  } finally {
    loading.value = false
  }
}

const showAddDialog = () => {
  dialogType.value = 'add'
  form.value = { name: '', template_type: 'csv', description: '', is_active: true }
  dialogVisible.value = true
}

const editTemplate = (template: ReportTemplate) => {
  dialogType.value = 'edit'
  form.value = { ...template }
  dialogVisible.value = true
}

const deleteTemplate = (template: ReportTemplate) => {
  ElMessage.success('模拟删除成功')
  templates.value = templates.value.filter(t => t.id !== template.id)
}

const submit = () => {
  ElMessage.success('已保存（模拟）')
  dialogVisible.value = false
  loadTemplates()
}

onMounted(loadTemplates)
</script>

<style scoped>
.report-templates {
  padding: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 